<!DOCTYPE html>
<html class="x-admin-sm">
{include file='public/header'}
<script src="/admin/xadmin/lib/layui/upload.js" charset="utf-8"></script>
<style>
    .layui-form-label{
        width: 95px;
    }
    .layui-input-block{
        margin-left: 125px;
    }
</style>
<body>
    <div class="x-body">
        <form class="layui-form" lay-filter="formAjax">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>名称
                </label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" placeholder="名称" required="required"
                        lay-verify="required" autocomplete="off" class="layui-input" value="" />
                </div>
            </div>
            <div class="layui-form-item" style="display: flex;">
                <label class="layui-form-label">
                    <span class="x-red">*</span>选择短剧
                </label>
                <div id="pVideo" style="width: 100%;flex: 1;"></div>
            </div>
            <input type="hidden" name="id" id="id" value="" />
            <input type="hidden" name="cover_img" id="cover_img" value="" />
            <button id="submitData" class="layui-btn" lay-submit lay-filter="submitData" style="display: none;" />
        </form>
    </div>
    <script>
        let params = {
            addUrl: '/admin/video_template/add',
            editUrl: '/admin/video_template/edit',
            detailUrl: '/admin/video_template/detail',
        }
        form_ajax(params)
        let xmSelectVideoOption = {
            url: '/admin/video/select',
            initValue: '',//初始值
            el: '#pVideo',
            pageSize: 5,
            name: 'video_ids',
            radio: false,
            clickClose: false,
            label: {
                type: 'text'
            },
            onFn: function (data) {
                console.log(data)
                let str = '';
                $.each(data.arr, function (index, value) {
                    // 在这里执行对每个元素的操作
                    str = str == '' ? value.name : str + ',' + value.name
                });
                $('#video_name').val(str)
            },
        }

        let id = GetQueryString('id')
        if (id) {
            Ajax(params.detailUrl, { id }).then(result => {
                xmSelectVideoOption.initValue = result.data.video_arr
                xmSelectA(xmSelectVideoOption)
            });
        } else {
            xmSelectA(xmSelectVideoOption)
           
        }

        function infoSelectN(option,value){
            if(option.elem == '#pMenu'){
                showAccounts(value)
            }
        }
        
        function showAccounts(value){
            if(value){
                $('.cooperation_mode').show()
            }else{
                $('.cooperation_mode').hide()
            }
        }

        uploadFile({
            elem: '#video_btn', 
            ossUrl:'/admin/video/uploadCredentials',
            uploadSuccessCallback: function (res) {
                $('.layui-upload-list').show()
                $('.layui-upload-img').attr('src', res.url);
                $("input[name='cover_img']").val(res.url);
            }, 
            uploadErrorCallback: function() {
                return layer.msg('上传失败');
            }
        })

        layui.use(['laydate','form'], function(){
            var laydate = layui.laydate;
            laydate.render({
                elem: '#hztime',
                range:['#start_time','#end_time'],
                format: 'yyyy-MM-dd'
            });
            laydate.render({
                elem: '#launch_start_time'
                ,type: 'datetime'
            });
            
            var form = layui.form;
            form.on('radio(is_copy)', function(data){
                if(data.value == 1){
                    $('#cooperation_time').show()
                }else{
                    $('#cooperation_time').hide()
                }
            });
            form.verify({
                checkboxRequired:function(value,dom){
                    if(!form.val('formAjax')['play_platform[0]'] && !form.val('formAjax')['play_platform[1]']){
                        return '请选择播放平台';
                    }
                }
            })
        })
    </script>
</body>

</html>